import React from "react";
import i18next from "i18next";
import Page from "../../components/Page";
import {
    Content,
    PledgeNftItem,
    UnStartView,
    MobileView,
    SwitchButton,
    FlexViewCenter,
    CountDown,
    TotalLockView,
    FlexViewBetween,
    MainButton
} from "../../components/components";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {StyledTopBar} from "../../components/TopBar/TopBar";
import {useUpdateLogo} from "../../state/logoaction/hooks";
import styled from "styled-components";
import {colors} from "../../common/common";
import NftStore from "../../components/Nft/NftStore";
import useBasisCash from "../../hooks/useBasisCash";
import useHandleTransactionReceipt from "../../hooks/useHandleTransactionReceipt";
import MyFishModal, {SelectCard} from "../../components/fishmodal/MyFishModal";
import useModal from "../../hooks/useModal";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import SelectFishCardModal from "../../components/fishmodal/SelectFishCardModal";
import {FishCard, FishGuize, FishGuizeDesc, FishGuizeTit} from "../../components/fishmodal/FishModal";
import RewardFishModal from "../../components/fishmodal/RewardFishModal";

const Combine = React.memo(()=>{
    useUpdateLogo(ImageCommon.logo);
    const basisCash = useBasisCash();
    const [firstFish,setFirst] = React.useState<any>({});
    const [secondFish,setSecond] = React.useState<any>({});
    const [onSelectFishModal] = useModal(<SelectFishCardModal coin={"USDT"} color={getColor()} fishNumber={getFishNumber()} onSelect={onSelect}/>);
    const [onRewardFishModal] = useModal(<RewardFishModal onSubmit={onSubmit}/>);
    let type = 0;
    // 筛选条件 颜色
    function getColor() {
        return firstFish.color ?? secondFish.color ?? -1;
    }
    // 筛选条件 编号
    function getFishNumber() {
        return firstFish.number ?? secondFish.number ?? -1;
    }
    function onSelect(item:any) {
        switch (type) {
            case 0:
                setFirst(item);
                break;
            case 1:
                setSecond(item);
            default:
        }
    }
    async function onCombine() {
        console.log(firstFish.number,secondFish.number)
         await basisCash?.contracts?.FishCardOptions?.synthesisFish(firstFish.number,secondFish.number)
        onRewardFishModal();

    }
    function onSubmit() {
        setFirst({});
        setSecond({});
    }
    return(
        <Page>
            <StyledTopBar
                bg={ImageCommon.banner_combine}
            >
            </StyledTopBar>
            <Content>
                <PledgeWrap>
                    {firstFish.number?<FishCard
                        item={firstFish}
                    ></FishCard>:<SelectCard
                        onAdd={()=>{
                            type=0;
                            onSelectFishModal()
                        }}
                    ></SelectCard>}
                    {secondFish.number?<FishCard
                        item={secondFish}
                    ></FishCard>:<SelectCard
                        onAdd={()=>{
                            type=1;
                            onSelectFishModal()
                        }}
                    ></SelectCard>}
                </PledgeWrap>
                <FlexViewCenter>
                    <MainButton
                        title={"点击合成"}
                        onClick={onCombine}
                    ></MainButton>
                </FlexViewCenter>
                <div>
                    <TipView>
                        <FishGuizeTit>规则说明：</FishGuizeTit>
                        <FishGuizeDesc>{"1、每一张鱼卡，具有形态和四个基因卡槽，按顺序分别为：鱼头、鱼身、鱼鳍和鱼尾，每个卡槽内都含有某一种鱼基因。形态和基因可以通过合成来改变；\n" +
                        "                            2、鱼卡之间的合成，只能发生在同颜色的鱼卡之间，所获得的也是同颜色的鱼卡；\n" +
                        "                            3、合成发生时，新卡会获得两张原材料鱼卡中的对应基因卡槽的其中之一基因，合成结果具有随机性。例如：鱼头A+鱼头A=鱼头A；鱼头A+鱼头B=鱼头A或者B；此处A和B分别代表不同的基因；\n" +
                        "                            4、合成后，两张原材料卡的NYC值分配：50%由新卡继承、10%回收销毁、20%合成奖励池、10%图鉴奖励池、10%工会奖励池；\n" +
                        "                            5、鱼卡的品质判定：根据形态与基因的一致性， 做为鱼卡品质的判定依据。如，形态A+鱼头A+鱼身A=优秀、形态A+鱼头A+鱼身A+鱼鳍A=稀有、形态A+鱼头A+鱼身A+鱼鳍A+鱼尾A=完美；此处A和B分别代表不同的基因；"}</FishGuizeDesc>
                    </TipView>
                </div>
            </Content>
        </Page>
    )
})
const TipView = styled(FishGuize)`
    height:auto;
`
const PledgeWrap = styled.div`
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:50px;
    border: 2px solid #F27405;
    border-radius: 20px;
    background-color:${colors.FFFAF6};
    margin-bottom:50px;
    @media (max-width: 768px) {
       padding:0;
       border:0px solid #F27405;
       margin-bottom:0px;
       background-color:${colors.transparent};
       margin-bottom:30px;
       justify-content:center;
    };
`

export default Combine;
